import {Pressable, StyleSheet, Text, View} from 'react-native';
import React, {useState, useEffect} from 'react';

const PressableDemo7_11 = () => {
  const [first, setfirst] = useState(0);
  const [a, seta] = useState({a: 1});

  // console.log('=============');
  useEffect(() => {
    setTimeout(() => {
      setfirst(2);
    }, 3000);
    return () => {};
  }, []);

  // useEffect(() => {
  //   setTimeout(() => {
  //     console.log('走了', a.a);
  //     seta({a: 3});
  //   }, 3000);
  //   return () => {};
  // }, [a]);
  return (
    <View style={styles.root}>
      <Text style={{color: 'orange', fontSize: 20, textAlign: 'center'}}>
        7_11PressableDemo
      </Text>
      <Pressable
        style={function (state) {
          console.log(arguments, first, a.a);
          return [styles.button, state.pressed && styles.buttonPressed];
        }}>
        {state => (
          <Text style={[styles.txt, state.pressed && styles.txtPressed]}>
            按 钮
          </Text>
        )}
      </Pressable>
    </View>
  );
};

export default PressableDemo7_11;

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 'auto',
  },
  button: {
    width: 300,
    height: 65,
    backgroundColor: '#2030FF',
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonPressed: {
    backgroundColor: 'white',
  },
  txt: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold',
  },
  txtPressed: {
    color: '#2030FF',
  },
});
